<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好，大学</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

<div class="banner">
    <div class="ban_text">
        <p class="a1"><span>你好，</span>大学</p>
        <p class="a2">Hello,university</p>
    </div>
    <link rel="stylesheet" href="css/lb.css">
    <div class="mob_lb">

        <span class="jianleft" onClick="lun('previous')">&lt;</span>
        <span class="jianright" onClick="lun('next')">&gt;</span>
        <img src="images/lb2.jpg" class="box2">
        <div class="dote"></div>
    </div>
    <script src="js/lb.js"></script>
</div>
<div class="cont">
    <div id="zsa">
        <p class="a1">认识我们从这里开始</p>
        <p class="a2">解决毕业生从网络上获取的院校信息过于零散，学生对目标院校及专业了解不足等问题</p>
    </div>
    <br/>
    <div class="col-xs-3  col-md-offset-2">
        <button style="width: 200px;height: 150px" data-toggle="modal" data-target="#universityModal">
            <div align="center">
                <img src="/images/t1.png"><label>搜院校</label>
            </div>
        </button>
    </div>
    <div class="col-xs-3  col-md-offset-2">
        <button style="width: 200px;height: 150px" data-toggle="modal" data-target="#majorModal">
            <div align="center">
                <img src="/images/t2.png"><label>查专业</label>
            </div>
        </button>
    </div>

    <div style="clear:both"></div>
</div>

<div class="tupian">
    <img src="images/lb1.jpg"/>
    <div class="xswb">
        <div class="tt1">你好，大学</div>
        <p class="c">向高中毕业生提供报考信息，使面临高考志愿填报的毕业生更高效，快捷的获取大学信息。
            节约时间，整合信息。建起大学和毕业生之间的桥梁，从而使毕业生更好的找到自己的定位，最后能找到适合自己的专业和院校。
            走进大学！
        </p>
    </div>
</div>
<div class="ljwm">
    <div class="tt">了解我们</div>
    <P>让大学变得更简单</P>
    <div class="zsbox">
        <div class="piczs">
            <img src="images/1.jpg"/>
        </div>
        <div class="piczs" style="margin:0px 50px;">
            <img src="images/2.jpg"/>
        </div>
        <div class="piczs">
            <img src="images/3.jpg"/>
        </div>
    </div>
</div>
<div class="foot">
    <P>版权信息</P>
</div>

<!-- 模态框部分 -->
<div class="modal fade" id="universityModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="modalTxt1">
                    搜院校
                </h4>
            </div>
            <!-- 采用表单提交的方式提交参数跳转页面 -->
            <form class="form-horizontal" role="form" action="/toUniversity">
                <div class="modal-body">
                    <label for="inputUniversity">输入院校名称</label>
                    <input type="text" name="schoolName" id="inputUniversity">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                        搜索
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="majorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="modalTxt2">
                    查专业
                </h4>
            </div>

            <form class="form-horizontal">
                <div class="modal-body">
                    <label for="inputMajor">输入专业名称</label>
                    <input type="text" name="schoolName" id="inputMajor">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="majorBtn" class="btn btn-primary">
                        查找
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="showMajor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    专业信息卡片
                </h4>
            </div>

            <form class="form-horizontal">
                <div class="modal-body" id="major_content">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ajax部分 -->
<script type="text/javascript">
    var data_major;
    $('#majorBtn').click(function () {
        let search = {};
        search['name'] = $('#inputMajor').val();
        $.ajax({
            url: 'http://localhost:8080/getMajor',
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(search),
            success: function (data) {
                data_major = data;
                if (data.code === 1) {
                    alert("查找失败!");
                } else {
                    $('#majorModal').modal("hide");
                    $('#showMajor').modal("show");
                    let html = '<p style="font-size: large;color: #3d8cd8">' + data.data.professionName + '</p>>' + '<p>&emsp;' + data.data.professionIntroduce + '</p>';
                    $('#major_content').html(html);
                }
            }
        })
    })

</script>

</body>
</html>